{% extends "base_petadmin.html" %}

{% block mainheading %}{{ block.super }} \ List of track records list (Futures){% endblock %}

{% block object-tools %}

    <ul class="object-tools">
        <li><a href="#" onclick="OpenTrackRecordsPopup(500, 650, '/tracking/getcreate/futures/?year={{ month_year_link.current_year }}&month={{ month_year_link.current_month }}'); return false;" class="addlink">Add entry</a></li>
        <li><a href="/tracking/futures/importtext/?year={{ month_year_link.current_year }}&month={{ month_year_link.current_month }}">Import Futures text</a></li>
        <li><a href="/maintain/cc/">Clear cache</a></li>
    </ul>

{% endblock %}


{% block content %}

{% include "tracking/_links.html" with month_year_link=month_year_link %}

<table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Market</th>
        <th>Contr</th>
        <th>Dir.</th>
        <th>Entry</th>
        <th>Exit</th>
        <th>Points</th>
        <th>Cor</th>
        <th nowrap>Point<br />Value</th>
        <th nowrap>EURXXX</th>
        <th nowrap>P/L (&euro;)</th>
        <th nowrap>P/L - fees (&euro;)</th>
        <th nowrap>P/L Daily &euro; (fees)</th>
        <th>Sys</th>
        {# <th nowrap>Trad. P/L &euro;</th> #}
        {# <th nowrap># trad.</th> #}
        {# <th></th> #}
    </tr>
    </thead>
    <tbody id="TrackRecordsFuturesTbody">

        {# Ajax loading #}
        <tr>
            <td colspan="17"><img src="http://jrc.play-and-think.com/images/ajaxloading.gif" /></td>
        </tr>

    </tbody>
</table>

<div id="TrackRecordsMask" style="display: none; z-index: 300; background: #d3d3d3; position: absolute; top: 0px; left: 0px; opacity: 0.9;"></div>
<div id="TrackRecordsPopupDiv" style="display: none; z-index: 301; background: #ffffff; position: absolute; border-radius: 10px; border: solid 1px black;">
    <div id="TrackRecordsClose" style="text-align: right; padding-right: 2px; padding-top: 2px;">
        <a href="#" onclick="CloseTrackRecordsPopup(); return false;"><img src="http://jrc.play-and-think.com/images/close.png" alt="Close window" width="16" height="16" /></a>
    </div>
    <div id="TrackRecordsMsg" style="display: none; text-align: center;">.</div>
    <div id="TrackRecordsLoadable" style="padding-left: 10px;"></div>
</div>

{% include "tracking/_links.html" with month_year_link=month_year_link %}

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
      google.load('visualization', '1', {packages: ['imagechart']});
    </script>

    <script type="text/javascript" src="http://jrc.play-and-think.com/js/jrc.js"></script>
    <script type="text/javascript">
    
        var gIsTracksLoaded = true;
        var gTrackRecordMsgDiv = null;
        var gTrackType = "futures";
        var gCurrentYear = {{ month_year_link.current_year }};
        var gCurrentMonth = {{ month_year_link.current_month }};
    
        // To load charts
        var gArProfitLossesDaily = [];
        // Marktes totals (first should be blank!)
        var gArMarketsNames = [""];
        var gArMarketsTotals = [""];
        
        // Markets totals
        var gArMarketsNamesAndTotals = [];
        var gMarketsTotalsMin = 0;
        var gMarketsTotalsMax = 0;

        var gArPercentiles = [];
        
        function BuildTrackRecordsFuturesCharts()
        {
            {# Do not load for current month #}
            if( {{ current_month }} )
            {
//                return;
            }
         
         
            /**
             *  Draw P/L daily
             */
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'x');
            data.addColumn('number', 'Trade');
            data.addColumn('number', 'P/L daily');
//            alert("Profit/losses daily data length: " + gArProfitLossesDaily.length);
            for(var i = 0; i < gArProfitLossesDaily.length; i++)
            {
                data.addRow(gArProfitLossesDaily[i]);
            }
            // Create and draw the visualization.
            new google.visualization.LineChart(
                document.getElementById('visualization1')).draw(
                    data
                    , {
                        curveType: "function"
                        , width: 800
                        , height: 400
                        , vAxis: {maxValue: 10}
                    });


            // Create percentiles chart
            data = new google.visualization.DataTable();
            data.addColumn('string', 'x');
            data.addColumn('number', 'Percentile');
            for( var i = 0; i < gArPercentiles.length; i++)
            {
                data.addRow(gArPercentiles[i]);
            }

            new google.visualization.LineChart(
                document.getElementById('chartPercentiles')).draw(
                    data
                    , {
                        curveType: "function"
                        , width: 800
                        , height: 400
                        , vAxis: {maxValue: 10}
                    });

            // Create and populate the data table.
            var wrapper = new google.visualization.ChartWrapper({
                chartType: 'ColumnChart',
                dataTable: [gArMarketsNames, gArMarketsTotals],
                options: {'title': 'Markets'},
                containerId: 'visualization3'
            });
            wrapper.draw();



            // Create and populate the data table.
            data = google.visualization.arrayToDataTable(gArMarketsNamesAndTotals);
          
            // Create and draw the visualization.
            new google.visualization.ColumnChart(document.getElementById('visualization4')).
                draw(data,
                     {title:"P/L totals for each market",
                      width: 800, height:400,
                      hAxis: {title: "Markets"}}
            );

            var options = {};

            // 'bhg' is a horizontal grouped bar chart in the Google Chart API.
            // The grouping is irrelevant here since there is only one numeric column.
            options.cht = 'bhg';

            // Add a data range.
            //var min = -30000;
            //var max = 30000;
            options.chds = gMarketsTotalsMin + ',' + gMarketsTotalsMax;

            // Now add data point labels at the end of each bar.

            // Add meters suffix to the labels.
            var meters = 'N**';

            // Draw labels in pink.
            var color = '000000';

            // Google Chart API needs to know which column to draw the labels on.
            // Here we have one labels column and one data column.
            // The Chart API doesn't see the label column.  From its point of view,
            // the data column is column 0.
            var index = 0;

            // -1 tells Google Chart API to draw a label on all bars.
            var allbars = -1;

            // 10 pixels font size for the labels.
            var fontSize = 10;

            // Priority is not so important here, but Google Chart API requires it.
            var priority = 0;

            options.chm = [meters, color, index, allbars, fontSize, priority].join(',');

            // Create and draw the visualization.
            new google.visualization.ImageChart(document.getElementById('visualization4')).
            draw(data, options);
            
            // Create and populate the data table.
            data = google.visualization.arrayToDataTable(gArMarketsNamesAndTotals);
          
            // Create and draw the visualization.
            new google.visualization.ColumnChart(document.getElementById('visualization2')).
                draw(data,
                     {title:"P/L totals for each market",
                      width: 800, height:400,
                      hAxis: {title: "Markets"}}
            );        
        }
        
    </script>
    
{#	{% if current_month != "true" %}#}
    <div id="visualization1" style="width: 800px; height: 400px;"></div>
    <div id="visualization2" style="width: 800px; height: 400px;"></div>
    <div id="visualization4" style="width: 800px; height: 400px;"></div>
    <div id="visualization3" style="width: 800px; height: 500px;"></div>
    <div id="chartPercentiles" style="width: 800px; height: 500px;"></div>
{#	{% endif %}#}

{% endblock %}

{% block js_on_load %}

    LoadTrackRecordsFutures({{ month_year_link.current_year }}, {{ month_year_link.current_month }});
    
    {{ block.super }}

{% endblock %}
